<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>隐藏人格测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主紫色
                        secondary: '#FD79A8', // 辅助粉色
                        accent: '#00B4D8',    // 强调色-青色
                        dark: '#2D3748',      // 深色文本
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .mystery-bg {
                background-image: radial-gradient(circle, rgba(108, 92, 231, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .float {
                animation: float 6s ease-in-out infinite;
            }
            .pulse {
                animation: pulse 3s ease-in-out infinite;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in;
            }
            @keyframes float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.7; }
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">


    <!-- 主内容区 -->
    <main class="flex-1 pt-5 pb-24 px-4 relative">
        <!-- 全局背景渐变 -->
        <div class="fixed inset-0 w-full h-full" style="background: linear-gradient(135deg, #FDCFE8 0%, #E4C1F9 50%, #BDE0FE 100%); z-index: -1;"></div>
        
        <div class="container mx-auto max-w-md relative z-10">
            <!-- 测试介绍页 -->
            <div id="test-intro" class="mb-6">
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 mb-6 border border-white/50 relative overflow-hidden">
                    <div class="absolute inset-0 mystery-bg opacity-30"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center mx-auto mb-4 shadow-md">
                            <i class="fa fa-moon-o text-primary text-2xl"></i>
                        </div>
                        <h2 class="text-xl font-bold text-gray-800 mb-2">隐藏人格测试</h2>
                            <p class="text-sm text-gray-500">30题 · 发现你的潜在特质</p>
                        </div>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-check text-primary text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    每个人都有不为人知的一面，这个测试将帮助你发现自己隐藏的人格特质。
                                </p>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-heart text-primary text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    答案没有对错之分，请根据你的真实感受选择最符合的选项。
                                </p>
                            </div>
                            <div class="flex items-start space-x-3">
                                <div class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
                                    <i class="fa fa-clock-o text-primary text-xs"></i>
                                </div>
                                <p class="text-sm text-gray-600">
                                    预计用时10-15分钟，建议在安静环境中完成。
                                </p>
                            </div>
                        </div>
                        
                        <button id="start-test" class="w-full bg-gradient-to-r from-primary to-secondary text-white py-3 rounded-xl text-sm font-medium shadow-lg hover:shadow-xl transition-all duration-300">
                            <i class="fa fa-play mr-2"></i>开始测试
                        </button>
                    </div>
                </div>
                
                <!-- 测试特点 -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <h3 class="text-sm font-medium mb-3 flex items-center">
                        <i class="fa fa-magic text-primary mr-2"></i>测试特点
                    </h3>
                    <div class="space-y-3">
                        <div class="bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg p-3 border border-primary/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-eye text-primary text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">深度洞察</span>
                            </div>
                            <p class="text-xs text-gray-600">通过潜意识分析，发现你内心深处的真实特质</p>
                        </div>
                        <div class="bg-gradient-to-r from-secondary/5 to-secondary/10 rounded-lg p-3 border border-secondary/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-brain text-secondary text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">科学算法</span>
                            </div>
                            <p class="text-xs text-gray-600">基于心理学理论，多维度评估你的隐藏人格</p>
                        </div>
                        <div class="bg-gradient-to-r from-accent/5 to-accent/10 rounded-lg p-3 border border-accent/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-clock-o text-accent text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">快速准确</span>
                            </div>
                            <p class="text-xs text-gray-600">10分钟完成，即时获得详细的人格分析报告</p>
                        </div>
                        <div class="bg-gradient-to-r from-green-500/5 to-green-500/10 rounded-lg p-3 border border-green-500/20">
                            <div class="flex items-center mb-2">
                                <i class="fa fa-shield text-green-500 text-sm mr-2"></i>
                                <span class="text-xs font-medium text-gray-700">隐私保护</span>
                            </div>
                            <p class="text-xs text-gray-600">数据加密存储，保护你的个人信息安全</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 测试题目区（默认隐藏） -->
            <div id="test-questions" class="hidden">
                <!-- 进度条 -->
                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex justify-between text-sm mb-2">
                        <span>问题 <span id="current-question">1</span>/10</span>
                        <span id="progress-percent">10%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-primary h-2 rounded-full" style="width: 10%"></div>
                    </div>
                </div>
                
                <!-- 题目容器 -->
                <div id="question-container" class="bg-white rounded-xl shadow-sm p-5 mb-6">
                    <h3 id="question-text" class="text-base font-medium mb-4">
                        当你参加一个大型聚会时，你更倾向于：
                    </h3>
                    
                    <div class="space-y-3">
                        <label class="block">
                            <input type="radio" name="question-1" value="A" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-primary peer-checked:bg-primary/5 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-primary">
                                        <div class="w-3 h-3 rounded-full bg-primary hidden peer-checked:block"></div>
                                    </div>
                                    <span>A. 主动认识新朋友，参与各种话题讨论</span>
                                </div>
                            </div>
                        </label>
                        
                        <label class="block">
                            <input type="radio" name="question-1" value="B" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-primary peer-checked:bg-primary/5 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-primary">
                                        <div class="w-3 h-3 rounded-full bg-primary hidden peer-checked:block"></div>
                                    </div>
                                    <span>B. 和熟悉的人待在一起，不主动拓展新圈子</span>
                                </div>
                            </div>
                        </label>
                        
                        <label class="block">
                            <input type="radio" name="question-1" value="C" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-primary peer-checked:bg-primary/5 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-primary">
                                        <div class="w-3 h-3 rounded-full bg-primary hidden peer-checked:block"></div>
                                    </div>
                                    <span>C. 看情况而定，有时活跃有时安静</span>
                                </div>
                            </div>
                        </label>
                        
                        <label class="block">
                            <input type="radio" name="question-1" value="D" class="hidden peer">
                            <div class="p-3 border border-gray-200 rounded-lg peer-checked:border-primary peer-checked:bg-primary/5 hover:bg-gray-50 transition-colors cursor-pointer">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-primary">
                                        <div class="w-3 h-3 rounded-full bg-primary hidden peer-checked:block"></div>
                                    </div>
                                    <span>D. 尽量避免这种场合，更喜欢小范围聚会</span>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                
                <!-- 导航按钮 -->
                <div class="flex justify-between">
                    <button id="prev-question" class="w-20 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        上一题
                    </button>
                    <button id="next-question" class="w-20 bg-primary text-white py-2.5 rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                        下一题
                    </button>
                </div>
            </div>
            
            <!-- 测试结果区（默认隐藏） -->
            <div id="test-result" class="hidden space-y-6">
                <!-- 结果概览 -->
                <div class="bg-white rounded-xl shadow-sm p-5 relative overflow-hidden">
                    <div class="absolute inset-0 mystery-bg opacity-50"></div>
                    
                    <div class="relative z-10">
                        <div class="text-center mb-6">
                            <div id="personality-icon" class="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-white bg-primary float">
                                <i class="fa fa-star text-xl"></i>
                            </div>
                            <h2 class="text-xl font-bold text-primary mb-1" id="personality-type">探索者型人格</h2>
                            <p class="text-sm text-gray-500" id="personality-tagline">你隐藏的一面是充满好奇心和探索欲的灵魂</p>
                        </div>
                        
                        <div class="bg-gray-50 rounded-lg p-4 mb-4">
                            <h3 class="text-sm font-medium mb-2">人格特质概览</h3>
                            <div class="flex flex-wrap gap-2 mb-3">
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">好奇心强</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">独立思考</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">适应性强</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">直觉敏锐</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">善于观察</span>
                            </div>
                            <p class="text-sm text-gray-600" id="personality-overview">
                                你的隐藏人格是"探索者"，这意味着在你平静的外表下，隐藏着一颗对世界充满好奇的心。你喜欢独自探索新事物，有着敏锐的观察力和直觉，常常能发现别人忽略的细节。虽然有时你表现得随和，但内心有着强烈的独立思考能力。
                            </p>
                        </div>
                        
                        <button id="retake-test" class="w-full bg-primary/10 text-primary py-2.5 rounded-lg text-sm font-medium hover:bg-primary/20 transition-colors">
                            <i class="fa fa-refresh mr-1"></i> 重新测试
                        </button>
                    </div>
                </div>
                
                <!-- 详细解析 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="text-base font-semibold mb-4 flex items-center">
                        <i class="fa fa-book text-primary mr-2"></i>隐藏人格详细解析
                    </h3>
                    
                    <div class="space-y-5 text-sm">
                        <div>
                            <h4 class="font-medium text-primary mb-2">内在驱动力</h4>
                            <p class="text-gray-600" id="motivation-analysis">
                                你内心深处最强烈的驱动力是对知识的渴望和对真相的探索。你不满足于表面现象，总是想了解事物的本质。这种驱动力有时会让你显得固执，但也正是这种特质让你在学习和工作中表现出色。你喜欢挑战自己的认知边界，不断拓展视野。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">人际关系中的隐藏面</h4>
                            <p class="text-gray-600" id="relationship-analysis">
                                在人际关系中，你常常表现得随和友善，但内心有着严格的筛选机制。你可能表面上和很多人保持良好关系，但真正能走进你内心的人并不多。你不喜欢过度暴露自己的想法，倾向于默默观察和了解他人。这种隐藏的谨慎让你在人际关系中保持主动权，但也可能让他人觉得难以真正了解你。
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">潜在优势与挑战</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <h5 class="text-xs font-medium text-gray-500 mb-2">潜在优势</h5>
                                    <ul class="space-y-1.5">
                                        <li class="flex items-start">
                                            <i class="fa fa-plus-circle text-green-500 mt-1 mr-2 text-xs"></i>
                                            <span>强大的观察力和洞察力</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-plus-circle text-green-500 mt-1 mr-2 text-xs"></i>
                                            <span>独立思考，不盲从他人</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-plus-circle text-green-500 mt-1 mr-2 text-xs"></i>
                                            <span>适应能力强，能快速应对变化</span>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h5 class="text-xs font-medium text-gray-500 mb-2">潜在挑战</h5>
                                    <ul class="space-y-1.5">
                                        <li class="flex items-start">
                                            <i class="fa fa-minus-circle text-red-500 mt-1 mr-2 text-xs"></i>
                                            <span>有时过于谨慎，错失机会</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-minus-circle text-red-500 mt-1 mr-2 text-xs"></i>
                                            <span>不善于表达内心想法</span>
                                        </li>
                                        <li class="flex items-start">
                                            <i class="fa fa-minus-circle text-red-500 mt-1 mr-2 text-xs"></i>
                                            <span>容易过度分析，增加心理负担</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-primary mb-2">个人成长建议</h4>
                            <p class="text-gray-600" id="growth-advice">
                                认识到自己的探索者特质后，你可以尝试在保持独立思考的同时，适当开放自己，分享你的发现和想法。不必担心被评判，你的独特视角可能会给他人带来启发。同时，学会在适当的时候放下分析，享受当下的体验。记住，探索外部世界的同时，也要关注内心的声音，平衡理性与感性。
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- 分享和保存按钮 -->
                <div class="flex gap-3">
                    <button class="flex-1 bg-secondary text-white py-2.5 rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors">
                        <i class="fa fa-share-alt mr-1"></i> 分享结果
                    </button>
                    <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                        <i class="fa fa-bookmark-o mr-1"></i> 保存结果
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 测试结果弹框 -->
    <div id="result-modal" class="fixed inset-0 bg-black/50 z-50 hidden">
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 transform translate-y-full transition-transform duration-300 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-bold text-gray-800">测试结果</h3>
                <button id="close-result-modal" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
                    <i class="fa fa-times text-gray-600"></i>
                </button>
            </div>
            
            <div id="result-content" class="space-y-6">
                <!-- 结果内容将通过JavaScript动态生成 -->
            </div>
            
            <div class="mt-6 flex space-x-3">
                <button id="retake-test-modal" class="flex-1 py-3 border border-gray-300 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    <i class="fa fa-refresh mr-2"></i>重新测试
                </button>
                <button id="back-to-home-modal" class="flex-1 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all duration-300">
                    <i class="fa fa-home mr-2"></i>返回首页
                </button>
            </div>
        </div>
    </div>

    <!-- 装饰元素 -->
    <div class="fixed top-1/3 left-4 w-4 h-4 rounded-full bg-primary/20 pulse z-0"></div>
    <div class="fixed bottom-1/4 right-6 w-6 h-6 rounded-full bg-secondary/20 pulse z-0" style="animation-delay: 1s"></div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 测试题目数据
        const testQuestions = [
            {
                id: 1,
                text: "当你参加一个大型聚会时，你更倾向于：",
                options: [
                    "A. 主动认识新朋友，参与各种话题讨论",
                    "B. 和熟悉的人待在一起，不主动拓展新圈子",
                    "C. 看情况而定，有时活跃有时安静",
                    "D. 尽量避免这种场合，更喜欢小范围聚会"
                ]
            },
            {
                id: 2,
                text: "当你需要做一个重要决定时，你通常会：",
                options: [
                    "A. 迅速做出决定，相信自己的直觉",
                    "B. 收集大量信息，仔细分析后再决定",
                    "C. 咨询他人意见，综合考虑后决定",
                    "D. 拖延决定，直到最后一刻不得不做出选择"
                ]
            },
            {
                id: 3,
                text: "当你感到压力大时，你会选择哪种方式放松：",
                options: [
                    "A. 进行剧烈运动，释放压力",
                    "B. 独自一人安静地看书或听音乐",
                    "C. 和朋友聚会，倾诉自己的烦恼",
                    "D. 做一些创造性的事情，如绘画或写作"
                ]
            },
            {
                id: 4,
                text: "对于别人对你的评价，你通常会：",
                options: [
                    "A. 非常在意，会因此调整自己的行为",
                    "B. 选择性接受，只关注自己认可的评价",
                    "C. 不太在意，相信自己的判断",
                    "D. 感到困惑，不知道该如何看待"
                ]
            },
            {
                id: 5,
                text: "当你计划周末活动时，你更倾向于：",
                options: [
                    "A. 提前详细规划好每一个环节",
                    "B. 只有一个大致方向，具体看情况",
                    "C. 完全不计划，随心情决定",
                    "D. 让别人来安排，自己跟随即可"
                ]
            },
            {
                id: 6,
                text: "当你听到一个新观点时，你的第一反应是：",
                options: [
                    "A. 怀疑其正确性，需要验证",
                    "B. 好奇并愿意了解更多细节",
                    "C. 与自己的观点比较，找出异同",
                    "D. 不太关心，除非与自己相关"
                ]
            },
            {
                id: 7,
                text: "在团队合作中，你更倾向于扮演哪种角色：",
                options: [
                    "A. 领导者，负责制定计划和分配任务",
                    "B. 执行者，专注于完成自己的任务",
                    "C. 协调者，促进团队沟通和合作",
                    "D. 创意者，提供新想法和解决方案"
                ]
            },
            {
                id: 8,
                text: "当你遇到不开心的事情时，你通常会：",
                options: [
                    "A. 向朋友或家人倾诉",
                    "B. 自己默默承受，不愿让别人知道",
                    "C. 通过工作或其他活动转移注意力",
                    "D. 发泄出来，比如哭泣或大喊"
                ]
            },
            {
                id: 9,
                text: "对于未来，你更倾向于：",
                options: [
                    "A. 有明确的规划和目标",
                    "B. 大致有方向，但灵活调整",
                    "C. 不太考虑，专注于当下",
                    "D. 感到迷茫，不知道该如何规划"
                ]
            },
            {
                id: 10,
                text: "当你需要学习新技能时，你会：",
                options: [
                    "A. 系统学习理论，然后实践",
                    "B. 直接动手实践，在实践中学习",
                    "C. 找老师或专家指导",
                    "D. 参考教程，按步骤学习"
                ]
            }
        ];

        // 人格类型数据
        const personalityTypes = [
            {
                type: "探索者型人格",
                tagline: "你隐藏的一面是充满好奇心和探索欲的灵魂",
                color: "primary",
                icon: "fa-star",
                traits: ["好奇心强", "独立思考", "适应性强", "直觉敏锐", "善于观察"],
                overview: "你的隐藏人格是\"探索者\"，这意味着在你平静的外表下，隐藏着一颗对世界充满好奇的心。你喜欢独自探索新事物，有着敏锐的观察力和直觉，常常能发现别人忽略的细节。虽然有时你表现得随和，但内心有着强烈的独立思考能力。",
                motivation: "你内心深处最强烈的驱动力是对知识的渴望和对真相的探索。你不满足于表面现象，总是想了解事物的本质。这种驱动力有时会让你显得固执，但也正是这种特质让你在学习和工作中表现出色。你喜欢挑战自己的认知边界，不断拓展视野。",
                relationship: "在人际关系中，你常常表现得随和友善，但内心有着严格的筛选机制。你可能表面上和很多人保持良好关系，但真正能走进你内心的人并不多。你不喜欢过度暴露自己的想法，倾向于默默观察和了解他人。这种隐藏的谨慎让你在人际关系中保持主动权，但也可能让他人觉得难以真正了解你。",
                growth: "认识到自己的探索者特质后，你可以尝试在保持独立思考的同时，适当开放自己，分享你的发现和想法。不必担心被评判，你的独特视角可能会给他人带来启发。同时，学会在适当的时候放下分析，享受当下的体验。记住，探索外部世界的同时，也要关注内心的声音，平衡理性与感性。"
            },
            {
                type: "守护者型人格",
                tagline: "你隐藏的一面是充满责任感和保护欲的守护者",
                color: "accent",
                icon: "fa-shield",
                traits: ["责任感强", "忠诚可靠", "善于保护", "细心周到", "坚韧不拔"],
                overview: "你的隐藏人格是\"守护者\"，这意味着你内心深处有着强烈的责任感和保护欲。即使表面上看起来随和放松，你也在默默关注着周围人的需求，并随时准备提供帮助。你重视稳定和安全，是他人可以依靠的对象。",
                motivation: "你内心最强烈的驱动力是保护他人和维持秩序。你渴望创造一个安全、稳定的环境，让自己和所关心的人能够安心生活。这种驱动力让你在困难面前表现出非凡的韧性，即使牺牲自己的利益也在所不惜。",
                relationship: "在人际关系中，你常常扮演着支持者的角色，默默为他人付出而不求回报。你可能不善于表达自己的情感，但会通过实际行动来证明自己的关心。你对朋友非常忠诚，愿意在他们需要的时候伸出援手，但也需要注意不要过度承担他人的问题。",
                growth: "认识到自己的守护者特质后，你可以尝试在关心他人的同时，也照顾好自己的需求。不必总是把别人的需求放在第一位，你的感受同样重要。学会适当表达自己的想法和感受，让他人更好地了解你，而不是仅仅把你看作一个可以依靠的对象。"
            },
            {
                type: "创造者型人格",
                tagline: "你隐藏的一面是充满想象力和创造力的艺术家",
                color: "secondary",
                icon: "fa-paint-brush",
                traits: ["富有创意", "想象力丰富", "敏感细腻", "追求独特", "善于表达"],
                overview: "你的隐藏人格是\"创造者\"，这意味着你内心深处有着丰富的想象力和创造力。即使你的职业或日常生活看起来很普通，你也在不断地在脑海中构建新的想法和可能性。你对美有着敏锐的感知力，常常能从平凡中发现不凡。",
                motivation: "你内心最强烈的驱动力是表达自己的独特视角和创造力。你渴望通过各种形式的表达来分享自己对世界的理解，无论是通过艺术、文字、音乐还是其他形式。这种驱动力让你不断追求创新，不满足于现状。",
                relationship: "在人际关系中，你可能显得有些理想主义，对感情有着很高的期待。你善于理解他人的情感和需求，能与他人建立深层次的连接。但你也可能因为过于敏感而容易受伤，或者因为追求完美而对关系感到失望。",
                growth: "认识到自己的创造者特质后，你可以尝试给自更多空间和时间去发挥创造力，即使这意味着偏离常规。不必担心自己的想法过于奇特，正是这种独特性让你与众不同。同时，学会接受不完美，无论是在自己的创作中还是在人际关系中，这会让你更加轻松自在。"
            },
            {
                type: "领导者型人格",
                tagline: "你隐藏的一面是充满自信和决断力的领导者",
                color: "zodiac-leo",
                icon: "fa-trophy",
                traits: ["自信果断", "目标明确", "善于组织", "富有远见", "勇于担当"],
                overview: "你的隐藏人格是\"领导者\"，这意味着你内心深处有着强烈的领导欲和决断力。即使你平时表现得随和谦逊，在关键时刻也能挺身而出，带领他人前进。你有着清晰的目标感和方向感，知道如何实现自己的愿景。",
                motivation: "你内心最强烈的驱动力是实现目标和影响他人。你渴望通过自己的努力带来改变，推动事情向更好的方向发展。这种驱动力让你在面对挑战时充满韧性，不轻易放弃，同时也激励着周围的人。",
                relationship: "在人际关系中，你可能不自觉地扮演着主导角色，喜欢组织活动或为他人做决定。你重视忠诚和能力，欣赏那些能与你并肩作战的人。但你也需要注意不要过于强势，要学会倾听他人的意见，给他人表现的机会。",
                growth: "认识到自己的领导者特质后，你可以尝试在适当的时候展现自己的领导才能，而不必刻意隐藏。同时，也要学会信任他人，适当放权，让团队成员发挥各自的优势。记住，真正的领导力不仅在于指挥他人，更在于服务他人和共同成长。"
            }
        ];

        // 存储用户答案
        const userAnswers = {};
        let currentQuestionIndex = 0;

        // DOM元素
        const testIntro = document.getElementById('test-intro');
        const testQuestions = document.getElementById('test-questions');
        const testResult = document.getElementById('test-result');
        const startTestBtn = document.getElementById('start-test');
        const prevQuestionBtn = document.getElementById('prev-question');
        const nextQuestionBtn = document.getElementById('next-question');
        const retakeTestBtn = document.getElementById('retake-test');
        const backButton = document.getElementById('back-button');
        const questionContainer = document.getElementById('question-container');
        const currentQuestionEl = document.getElementById('current-question');
        const progressBarEl = document.getElementById('progress-bar');
        const progressPercentEl = document.getElementById('progress-percent');

        // 开始测试按钮点击事件
        startTestBtn.addEventListener('click', () => {
            testIntro.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            window.scrollTo(0, 0);
        });

        // 上一题按钮点击事件
        prevQuestionBtn.addEventListener('click', () => {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            }
        });

        // 下一题按钮点击事件
        nextQuestionBtn.addEventListener('click', () => {
            // 获取当前问题的答案
            const questionId = testQuestions[currentQuestionIndex].id;
            const selectedOption = document.querySelector(`input[name="question-${questionId}"]:checked`);
            
            if (!selectedOption) {
                alert('请选择一个答案后再继续');
                return;
            }
            
            // 保存答案
            userAnswers[questionId] = selectedOption.value;
            
            if (currentQuestionIndex < testQuestions.length - 1) {
                currentQuestionIndex++;
                renderQuestion(currentQuestionIndex);
                updateNavigationButtons();
                updateProgress();
                
                // 滚动到题目顶部
                questionContainer.scrollIntoView({ behavior: 'smooth' });
            } else {
                // 完成测试，显示结果
                calculateResult();
                showResultModal();
            }
        });

        // 重新测试按钮点击事件
        retakeTestBtn.addEventListener('click', () => {
            // 重置测试状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            
            // 切换到题目页面
            testResult.classList.add('hidden');
            testQuestions.classList.remove('hidden');
            renderQuestion(currentQuestionIndex);
            updateNavigationButtons();
            updateProgress();
            window.scrollTo(0, 0);
        });

        // 返回按钮点击事件
        backButton.addEventListener('click', () => {
            // 返回测试列表页
            if (testQuestions.classList.contains('hidden') && testResult.classList.contains('hidden')) {
                window.location.href = 'index.html#test-tab';
            } else {
                // 从测试中返回介绍页
                testQuestions.classList.add('hidden');
                testResult.classList.add('hidden');
                testIntro.classList.remove('hidden');
                window.scrollTo(0, 0);
            }
        });

        // 渲染题目
        function renderQuestion(index) {
            const question = testQuestions[index];
            
            // 清空容器
            questionContainer.innerHTML = '';
            
            // 创建题目文本
            const questionText = document.createElement('h3');
            questionText.id = 'question-text';
            questionText.className = 'text-base font-medium mb-4';
            questionText.textContent = question.text;
            questionContainer.appendChild(questionText);
            
            // 创建选项容器
            const optionsContainer = document.createElement('div');
            optionsContainer.className = 'space-y-3';
            questionContainer.appendChild(optionsContainer);
            
            // 创建选项
            question.options.forEach(option => {
                const label = document.createElement('label');
                label.className = 'block';
                
                const input = document.createElement('input');
                input.type = 'radio';
                input.name = `question-${question.id}`;
                input.value = option.charAt(0);
                input.className = 'hidden peer';
                
                // 如果有保存的答案，设置为选中
                if (userAnswers[question.id] === option.charAt(0)) {
                    input.checked = true;
                }
                
                const optionDiv = document.createElement('div');
                optionDiv.className = 'p-3 border border-gray-200 rounded-lg peer-checked:border-primary peer-checked:bg-primary/5 hover:bg-gray-50 transition-colors cursor-pointer';
                
                const optionContent = document.createElement('div');
                optionContent.className = 'flex items-center';
                
                const radioIndicator = document.createElement('div');
                radioIndicator.className = 'w-5 h-5 rounded-full border border-gray-300 flex items-center justify-center mr-3 peer-checked:border-primary';
                
                const radioDot = document.createElement('div');
                radioDot.className = 'w-3 h-3 rounded-full bg-primary hidden peer-checked:block';
                
                const optionText = document.createElement('span');
                optionText.textContent = option;
                
                radioIndicator.appendChild(radioDot);
                optionContent.appendChild(radioIndicator);
                optionContent.appendChild(optionText);
                optionDiv.appendChild(optionContent);
                label.appendChild(input);
                label.appendChild(optionDiv);
                optionsContainer.appendChild(label);
            });
            
            // 添加动画
            questionContainer.classList.add('fade-in');
            setTimeout(() => {
                questionContainer.classList.remove('fade-in');
            }, 500);
        }

        // 更新导航按钮状态
        function updateNavigationButtons() {
            // 更新上一题按钮
            if (currentQuestionIndex === 0) {
                prevQuestionBtn.disabled = true;
            } else {
                prevQuestionBtn.disabled = false;
            }
            
            // 更新下一题按钮文本
            if (currentQuestionIndex === testQuestions.length - 1) {
                nextQuestionBtn.textContent = '查看结果';
            } else {
                nextQuestionBtn.textContent = '下一题';
            }
        }

        // 更新进度条
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / testQuestions.length) * 100;
            progressBarEl.style.width = `${progress}%`;
            currentQuestionEl.textContent = currentQuestionIndex + 1;
            progressPercentEl.textContent = `${Math.round(progress)}%`;
        }

        // 计算测试结果（简化版）
        function calculateResult() {
            // 在实际应用中，这里应该根据用户的答案进行复杂的计算
            // 这里简单随机选择一种人格类型
            const randomIndex = Math.floor(Math.random() * personalityTypes.length);
            const result = personalityTypes[randomIndex];
            
            return result;
        }

        // 显示结果弹框
        function showResultModal() {
            const result = calculateResult();
            const modal = document.getElementById('result-modal');
            const resultContent = document.getElementById('result-content');
            
            // 生成结果内容
            resultContent.innerHTML = generateHiddenResultContent(result);
            
            // 显示弹框
            modal.classList.remove('hidden');
            
            // 添加动画效果
            setTimeout(() => {
                const modalContent = modal.querySelector('.absolute');
                modalContent.classList.remove('translate-y-full');
            }, 10);
        }

        // 生成隐藏人格测试结果内容
        function generateHiddenResultContent(result) {
            return `
                <div class="text-center mb-6">
                    <div class="w-20 h-20 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center mx-auto mb-4 shadow-lg float">
                        <i class="fa ${result.icon} text-2xl text-primary"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">${result.type}</h2>
                    <p class="text-sm text-gray-500">${result.tagline}</p>
                </div>
                
                <!-- 人格特质 -->
                <div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-4 mb-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-3">你的隐藏人格特质</h3>
                    <div class="flex flex-wrap gap-2">
                        ${result.traits.map(trait => `
                            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-xs">${trait}</span>
                        `).join('')}
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">人格概述</h3>
                        <p class="text-sm text-gray-600">${result.overview}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">内在动机</h3>
                        <p class="text-sm text-gray-600">${result.motivation}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">人际关系模式</h3>
                        <p class="text-sm text-gray-600">${result.relationship}</p>
                    </div>
                    
                    <div class="bg-white/50 rounded-xl p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">成长建议</h3>
                        <p class="text-sm text-gray-600">${result.growth}</p>
                    </div>
                </div>
            `;
        }

        // 初始化结果弹框事件
        function initResultModal() {
            const modal = document.getElementById('result-modal');
            const closeButton = document.getElementById('close-result-modal');
            const retakeButton = document.getElementById('retake-test-modal');
            const backToHomeButton = document.getElementById('back-to-home-modal');
            
            // 关闭弹框
            closeButton.addEventListener('click', closeResultModal);
            
            // 点击背景关闭弹框
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeResultModal();
                }
            });
            
            // 重新测试
            retakeButton.addEventListener('click', () => {
                closeResultModal();
                resetHiddenTest();
            });
            
            // 返回首页
            backToHomeButton.addEventListener('click', () => {
                window.location.href = 'index.html';
            });
        }

        // 关闭结果弹框
        function closeResultModal() {
            const modal = document.getElementById('result-modal');
            const modalContent = modal.querySelector('.absolute');
            
            // 添加关闭动画
            modalContent.classList.add('translate-y-full');
            
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }

        // 重置隐藏人格测试
        function resetHiddenTest() {
            // 重置所有状态
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            
            // 隐藏测试相关元素
            testQuestions.classList.add('hidden');
            testResult.classList.add('hidden');
            
            // 显示测试介绍
            testIntro.classList.remove('hidden');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 为返回按钮添加点击事件
        document.getElementById('back-button').addEventListener('click', function() {
            window.location.href = 'index.html';
        });

        // 为Tab按钮添加点击事件
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('tab-active'));
                // 添加当前活跃状态
                this.classList.add('tab-active');
                
                // 在实际应用中，这里应该跳转到相应的页面
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') {
                    window.location.href = `index.html#${tabId}`;
                }
            });
        });

        // 初始化弹框事件
        document.addEventListener('DOMContentLoaded', initResultModal);
    </script>
</body>
</html>
